import 'package:flutter/material.dart';
import 'package:flutter_deer/res/colors.dart';
import 'package:flutter_deer/res/dimens.dart';
import 'package:flutter_deer/ui/member/member_page_card_list.dart';
import 'package:flutter_deer/ui/member/provider/member_provider.dart';
import 'package:flutter_deer/ui/setting/setting_item_data.dart';
import 'package:flutter_deer/util/input_formatter/mny_format.dart';
import 'package:flutter_deer/widgets/press_blue_button.dart';
import 'package:get/get.dart';
import 'package:get/get_core/src/get_main.dart';

class MemberPageUser extends StatefulWidget {
  const MemberPageUser({super.key});

  @override
  State<MemberPageUser> createState() => _MemberPageUserState();
}

class _MemberPageUserState extends State<MemberPageUser> with AutomaticKeepAliveClientMixin<MemberPageUser> {
  int _selectedIndex = 0; // 当前选中的菜单索引

  String name = '';
  String phone = '';

  final mProvider = Get.find<MemberProvider>();

  // 右侧内容区域根据选中菜单显示不同内容
  Widget _buildContent() {
    switch (_selectedIndex) {
      case 0:
        return MemberCardListPage(
          onCardSelected: (card) {
            if (card != null) {
              print('选中卡片: ${card.cardName}');
            } else {
              print('取消选择');
            }
          },
        );
      case 1:
      case 2:
      case 3:
      case 4:
      case 5:
        return const Center(child: Text('在收银页面长按支付方式或者支付按钮\n进入排序'));
      case 6:
        return const Center(child: Text('111配置'));
      default:
        return const Center(child: Text('默认设置区域'));
    }
  }

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final isSelected = _selectedIndex == 0;
    // 平板布局 - 左右分栏
    return Scaffold(
      body: Row(
        children: [
          // 左侧菜单区域
          Container(
            width: 280,
            color: Colours.bg_color,
            padding: const EdgeInsets.only(top: 8.0, bottom: 8.0, left: 8.0, right: 8.0),
            child: ListView(
              children: <Widget>[
                // 客户基本信息表单

                Material(
                  color: isSelected ? Colours.gradient_blue.withOpacity(0.4) : Colors.white,
                  borderRadius: BorderRadius.circular(3),
                  child: InkWell(
                      hoverColor: Colours.bg_press,
                      onTap: () {
                        setState(() {
                          _selectedIndex = 0;
                        });
                      },
                      child: Container(
                        decoration: isSelected
                            ? BoxDecoration(
                                color: Colors.blue.withOpacity(0.1),
                                border: Border.all(
                                  color: isSelected ? Colors.blue : Colors.blue.withOpacity(0.3),
                                  width: 1,
                                ),
                                borderRadius: BorderRadius.circular(0),
                                boxShadow: [
                                  BoxShadow(
                                    color: Colors.blue.withOpacity(0.2),
                                    blurRadius: 4,
                                    offset: const Offset(0, 2),
                                  ),
                                ],
                              )
                            : null,
                        padding: const EdgeInsets.all(10),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            // 会员基本信息
                            Row(
                              // 垂直方向基于基线对齐
                              crossAxisAlignment: CrossAxisAlignment.baseline,
                              // 指定使用字母基线
                              textBaseline: TextBaseline.alphabetic,
                              children: [
                                // name
                                SizedBox(
                                  width: 70,
                                  child: Text(
                                    mProvider.mUser.value?.nickname ?? ' - ',
                                    style: const TextStyle(
                                      fontSize: Dimens.font_sp18,
                                      // fontWeight: FontWeight.bold,
                                      color: Colours.text,
                                      height: 1.0,
                                      fontWeight: FontWeight.bold,
                                    ),
                                    overflow: TextOverflow.ellipsis, // 添加省略号
                                    maxLines: 1, // 限制为单行
                                  ),
                                ),

                                // Vol
                                Text(
                                  '  |  ${mProvider.mUser.value?.phone ?? ' - '}',
                                  style: const TextStyle(
                                    fontSize: Dimens.font_sp16,
                                    color: Colours.text,
                                  ),
                                ),

                                const SizedBox(width: 10),

                                Container(
                                  // width: double.infinity,
                                  // height: 200,
                                  // 圆角设置为4
                                  decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(4),
                                    // 渐变背景
                                    gradient: const LinearGradient(
                                      colors: [
                                        Colours.grey4B4B4F,
                                        Colours.grey48484A,
                                        Colours.grey0A0A0A,
                                      ],
                                      begin: Alignment.topLeft,
                                      end: Alignment.bottomRight,
                                    ),
                                  ),
                                  // 内容居中

                                  child: Padding(
                                    padding: const EdgeInsets.only(left: 6.0, right: 6.0, top: 2.0, bottom: 2.0),
                                    child: Text(
                                      mProvider.mUser.value?.levelName ?? '-',
                                      style: const TextStyle(
                                        color: Colors.white,
                                        fontSize: Dimens.font_sp14,
                                        // fontWeight: FontWeight.bold,
                                      ),
                                    ),
                                  ),
                                ),
                              ],
                            ),

                            const SizedBox(height: 16),
                            _buildInfoRow('积分', '${mProvider.mUser.value?.memberIntegral?.accountBalance ?? ' - '}'),
                            const SizedBox(height: 6),

                            _buildInfoRow('积分', '${mProvider.mUser.value?.memberIntegral?.accountBalance ?? ''}'),
                            const SizedBox(height: 6),
                            _buildInfoRow('账户余额', '${mProvider.mUser.value?.accountSumInfoResponse?.indAccountAmountSum?.toYuan ?? '-'}元(不含企业子卡)'),
                            const SizedBox(height: 6),
                            _buildInfoRow('冻结余额', '${mProvider.mUser.value?.accountSumInfoResponse?.freezeAccountAmountSum ?? '-'}元'),
                            const SizedBox(height: 6),
                            _buildInfoRow('标签车队', '${mProvider.mUser.value?.simpleTagInfoResponses?.map((s) => s.tagName).join('，') ?? ''}'),
                            const SizedBox(height: 6),
                            _buildInfoRow(
                                '车牌', '${mProvider.mUser.value?.memberPlates?.where((element) => element.plateNo?.isNotEmpty == true).map((s) => s.plateNo).join('，') ?? ''}'),
                            const SizedBox(height: 1),

                            // Row(
                            //   mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                            //   children: [
                            //     ElevatedButton(
                            //       onPressed: () {
                            //         // 编辑功能
                            //       },
                            //       style: ElevatedButton.styleFrom(
                            //         backgroundColor: Colors.blue,
                            //         foregroundColor: Colors.white,
                            //       ),
                            //       child: const Text('编辑'),
                            //     ),
                            //     ElevatedButton(
                            //       onPressed: () {
                            //         // 保存功能
                            //       },
                            //       style: ElevatedButton.styleFrom(
                            //         backgroundColor: Colors.green,
                            //         foregroundColor: Colors.white,
                            //       ),
                            //       child: const Text('保存'),
                            //     ),
                            //   ],
                            // ),
                          ],
                        ),
                      )),
                ),
                const SizedBox(height: 8),

                _buildSettingGroup([
                  SettingItemData(
                    title: '开卡',
                    trailing: const Text('', style: TextStyle(fontSize: 12, color: Colors.grey)),
                    showArrow: true,
                    tag: '1',
                    onTap: () {
                      setState(() => _selectedIndex = 1);
                    },
                  ),
                ]),
                const SizedBox(height: 8),
                // 零管配置
                _buildSettingGroup([
                  SettingItemData(
                    title: '发券',
                    trailing: const Text('', style: TextStyle(fontSize: 12, color: Colors.grey)),
                    showArrow: true,
                    tag: '2',
                    onTap: () {
                      setState(() => _selectedIndex = 2);
                    },
                  ),
                ]),
                const SizedBox(height: 8),

                // 语音播报和打印控制组合项
                _buildSettingGroup([
                  SettingItemData(
                    title: '消费记录',
                    trailing: const Text('', style: TextStyle(fontSize: 12, color: Colors.grey)),
                    showArrow: true,
                    onTap: () {
                      setState(() => _selectedIndex = 3);
                    },
                    tag: '3',
                  ),
                  SettingItemData(
                    title: '储值卡记录',
                    trailing: const Text('', style: TextStyle(fontSize: 12, color: Colors.grey)),
                    showArrow: true,
                    onTap: () {
                      setState(() => _selectedIndex = 4);
                    },
                    tag: '4',
                  ),
                  SettingItemData(
                    title: '优惠券记录',
                    trailing: const Text('', style: TextStyle(fontSize: 12, color: Colors.grey)),
                    showArrow: true,
                    onTap: () {
                      setState(() => _selectedIndex = 5);
                    },
                    tag: '5',
                  ),
                  SettingItemData(
                    title: '积分记录',
                    trailing: const Text('', style: TextStyle(fontSize: 12, color: Colors.grey)),
                    showArrow: true,
                    onTap: () {
                      setState(() => _selectedIndex = 6);
                    },
                    tag: '6',
                  ),
                ]),
                const SizedBox(height: 8),

                // 系统设置
                _buildSettingGroup([
                  SettingItemData(
                    title: '标签管理',
                    trailing: const Text('', style: TextStyle(fontSize: 12, color: Colors.grey)),
                    showArrow: true,
                    onTap: () async {
                      setState(() => _selectedIndex = 7);
                    },
                    tag: '7',
                  ),
                  SettingItemData(
                    title: '积分修改',
                    trailing: const Text('', style: TextStyle(fontSize: 12, color: Colors.grey)),
                    showArrow: true,
                    onTap: () async {
                      setState(() => _selectedIndex = 8);
                    },
                    tag: '8',
                  ),
                  SettingItemData(
                    title: '车牌管理',
                    trailing: const Text('', style: TextStyle(fontSize: 12, color: Colors.grey)),
                    showArrow: true,
                    onTap: () async {
                      setState(() => _selectedIndex = 9);
                    },
                    tag: '9',
                  ),
                ]),
                const SizedBox(height: 18),

                PressBlueButton(
                  height: 40,
                  fontSize: 16,
                  hoverColor: Colors.redAccent.withOpacity(0.5),
                  defaultColor: Colors.redAccent,
                  text: '退出用户',
                  onPressed: () {
                    mProvider.mUser.value = null;
                  },
                ),
              ],
            ),
          ),
          // 右侧内容区域
          Expanded(
            child: _buildContent(),
          ),
        ],
      ),
    );
  }

  // 构建设置项组
  Widget _buildSettingGroup(List<SettingItemData> items) {
    return Material(
      color: Colors.white,
      borderRadius: BorderRadius.circular(3),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: items.map((item) {
          final int index = items.indexOf(item);
          final bool isSelected = _selectedIndex.toString() == item.tag;
          return Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Material(
                  color: isSelected ? Colours.gradient_blue.withOpacity(0.4) : Colors.transparent,
                  child: InkWell(
                    hoverColor: Colours.bg_press,
                    onTap: item.onTap,
                    child: Container(
                      decoration: isSelected
                          ? BoxDecoration(
                              color: Colors.blue.withOpacity(0.1),
                              border: Border.all(
                                color: isSelected ? Colors.blue : Colors.blue.withOpacity(0.3),
                                width: 1,
                              ),
                              borderRadius: BorderRadius.circular(0),
                              boxShadow: [
                                BoxShadow(
                                  color: Colors.blue.withOpacity(0.2),
                                  blurRadius: 4,
                                  offset: const Offset(0, 2),
                                ),
                              ],
                            )
                          : null,
                      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
                      child: Row(
                        children: [
                          Expanded(
                            child: Text(item.title, style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold, color: Colors.black87)),
                          ),
                          if (item.trailing != null) item.trailing!,
                          if (item.showArrow) const Icon(Icons.arrow_forward_ios, color: Colors.grey, size: 18),
                        ],
                      ),
                    ),
                  )),
              if (index < items.length - 1) const Divider(height: 1, thickness: 1, indent: 16, endIndent: 16),
            ],
          );
        }).toList(),
      ),
    );
  }

  Widget _buildInfoRow(String label, String value) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        SizedBox(
          width: 60,
          child: Text(
            '${label}:',
            style: const TextStyle(
              fontSize: 14,
              // fontWeight: FontWeight.w500,
              color: Colours.dark_text_gray,
            ),
          ),
        ),
        const SizedBox(width: 8),
        // Expanded(
        //   child: Text(
        //     value,
        //     style: const TextStyle(
        //       fontSize: 14,
        //       color: Colours.text,
        //     ),
        //   ),
        // ),
        SizedBox(
          width: 174,
          child: Text(
            value,
            style: const TextStyle(
              fontSize: 14,
              // fontWeight: FontWeight.bold,
              color: Colours.black,
              // fontWeight: FontWeight.bold,
            ),
            overflow: TextOverflow.ellipsis, // 添加省略号
            maxLines: 1, // 限制为单行
          ),
        ),
      ],
    );
  }

  @override
  bool get wantKeepAlive => true;
}
